<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"/>
    <link rel="stylesheet" href="/Y-Admin/layui/css/layui.css">
    <link rel="stylesheet" href="/Y-Admin/css/common.css">
    <link rel="stylesheet" href="/Y-Admin/layui/extend/dtree.css">
    <link rel="stylesheet" href="/Y-Admin/layui/extend/font/dtreefont.css">
    <link rel="stylesheet" href="/Y-Admin/layui/extend/formSelects-v4.css">

    <style>
        .content {
            padding: 15px;
        }

        i {
            margin-right: 10px;
        }

        .item {
            margin-bottom: 15px;
            box-shadow: 1px 1px 5px 3px #eeeeee;
        }

        .layui-card-body {
            border-bottom: 1px solid #dcdada;
        }

        .exe-1 {
            margin-right: 20px;
            display: inline-block;
        }

        .w-e-text-container {
            height: 300px !important; /*!important是重点，因为原div是行内样式设置的高度300px*/
        }

        blockquote {
            display: block;
            border-left: 8px solid #d0e5f2;
            padding: 5px 10px;
            margin: 10px 0;
            line-height: 1.4;
            font-size: 100%;
            background-color: #f1f1f1;
        }

        .layui-bg-gray {
            padding: 2px 8px;
            margin-right: 20px;
        }
    </style>
</head>
<body>
<div class="yadmin-body animated fadeIn">
    <div class="layui-col-md12">
        <blockquote class="layui-elem-quote">问卷标题：${questionnaire.title}</blockquote>
    </div>
    <div class="layui-col-md12">
        <div class="layui-form layui-form-pane" style="margin-top: 20px">
            <div class="layui-form-item">
                <div class="layui-input-block" style="margin-left: 0px">
                    <button class="layui-btn layui-btn-primary layui-btn-sm"
                            lay-submit lay-filter="showDialog">添加题目
                    </button>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <c:forEach items="${questionList}" var="item" varStatus="xh">
                <div class="layui-card item">
                    <div class="layui-card-header" style="position: relative">
                        <span class="layui-badge layui-bg-gray"># ${xh.count}</span>
                        <button type="button" class="layui-btn layui-btn-xs"
                                style="position: absolute; right: 10px; top: 10px"
                                onclick="del(${item.id})">
                            <i class="layui-icon">&#xe640;</i>
                        </button>
                    </div>
                    <div class="layui-card-body" style="border-bottom: 1px solid #eeeeee">
                        <div style="margin-bottom: 5px">
                            <strong>
                                <label style="color: red; margin-right: 5px">*</label>题干
                            </strong>
                        </div>
                            ${item.questionStem}
                    </div>
                    <div class="layui-card-body" style="min-height: 30px;">
                        <div class="exe-1">
                        <span class="layui-badge layui-bg-black" style="padding: 2px 8px">
                            A、${item.optionA}
                        </span>
                        </div>
                        <div class="exe-1">
                        <span class="layui-badge layui-bg-black" style="padding: 2px 8px">
                            B、${item.optionB}
                        </span>
                        </div>
                        <div class="exe-1">
                        <span class="layui-badge layui-bg-black" style="padding: 2px 8px">
                            C、${item.optionC}
                        </span>
                        </div>
                        <div class="exe-1">
                        <span class="layui-badge layui-bg-black" style="padding: 2px 8px">
                            D、${item.optionD}
                        </span>
                        </div>
                    </div>
                </div>
            </c:forEach>
        </div>
        <div class="layui-col-md12" style="text-align: right; margin-top: 20px">
            <c:if test="${questionnaire.status == 0}">
                <button class="layui-btn layui-btn-sm layui-btn-normal" onclick="editStatus(${questionnaire.id})">发布
                </button>
            </c:if>

            <c:if test="${questionnaire.status == 1}">
                <button class="layui-btn layui-btn-disabled layui-btn-sm">已发布</button>
            </c:if>
        </div>
    </div>
</div>

<div id="add" style="display: none; padding:10px 30px">
    <div class="layui-form layui-form-pane" lay-filter="add">
        <div class="layui-form-item" style="display: none">
            <div class="layui-input-block">
                <input type="text" name="questionnaireId" value="${questionnaire.id}"
                       required lay-verify="required"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="display: none">
            <div class="layui-input-block">
                <input type="text" name="exercisesType" value="1"
                       required lay-verify="required"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">题干</label>
            <div class="layui-input-block">
                    <textarea name="questionStem" placeholder="请输入题干" class="layui-textarea"
                              required lay-verify="required"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选项A</label>
            <div class="layui-input-block">
                <input type="text" name="optionA" required lay-verify="required"
                       placeholder="请输入选项A内容"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选项B</label>
            <div class="layui-input-block">
                <input type="text" name="optionB" required lay-verify="required"
                       placeholder="请输入选项B内容"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选项C</label>
            <div class="layui-input-block">
                <input type="text" name="optionC" required lay-verify="required"
                       placeholder="请输入选项C内容"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选项D</label>
            <div class="layui-input-block">
                <input type="text" name="optionD" required lay-verify="required"
                       placeholder="请输入选项D内容"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block" style="text-align: right">
                <button class="layui-btn layui-btn-sm layui-btn-normal" lay-submit lay-filter="add">确定</button>
            </div>
        </div>
    </div>
</div>

<div id="dialog" style="padding:30px; display: none; text-align: center; background-color:#1e88e5; color: #ffffff">
    <div class="layui-col-md12">
        <strong>发布成功</strong>
    </div>
</div>

<script src="/js/jquery-3.3.1.min.js" charset="utf-8"></script>
<script src="/js/ajax.js" charset="utf-8"></script>
<script src="/Y-Admin/layui/layui.js"></script>
<script src="/Y-Admin/js/common.js"></script>
<script type="text/javascript" src="/wangEditor/release/wangEditor.js"></script>

<script>
    layui.config({
        base: '/Y-Admin/layui/extend/'
    }).extend({
        formSelects: 'formSelects-v4'
    }).use(['form', 'layer', 'formSelects', 'dtree', 'upload'], function () {
        $ = layui.jquery;
        var form = layui.form
            , layer = layui.layer
            , formSelects = layui.formSelects
            , dtree = layui.dtree
            , upload = layui.upload;

        // 添加
        form.on('submit(showDialog)', function (formData) {
            layer.open({
                type: 1,
                title: '添加题目',
                area: ['550px', '500px'],
                content: $('#add'),
                success: function (layero, index) {
                    form.val('add', {
                        "questionStem": "",
                        "optionA": "",
                        "optionB": "",
                        "optionC": "",
                        "optionD": "",
                    })
                },
                cancel: function (index, layero) {
                    location.reload();
                }
            });
        });

        form.on('submit(add)', function (data) {
            Ax.rest("/sys/question/add", data.field, function (data) {
                form.val('add', {
                    "questionStem": "",
                    "optionA": "",
                    "optionB": "",
                    "optionC": "",
                    "optionD": "",
                    "answer": "",
                    "score": ""
                });
                layer.msg("添加成功", {icon: 6});
            })
        });

    });

    function del(id) {
        Ax.rest("/sys/question/delete", id, function (data) {
            location.reload();
        })
    }

    function editStatus(id) {
        var questionnaire = {};
        questionnaire.id = id;
        questionnaire.status = 1;
        Ax.rest("/sys/questionnaire/edit", questionnaire, function (d) {
            layer.open({
                type: 1,
                title: false,
                area: ['355px', '140px'],
                content: $('#dialog'),
                cancel: function (index, layero) {
                    location.href = "/sys/questionnaire/manage.html";
                }
            });
        })
    }
</script>

</body>
</html>